<template>
  <div class="container" style="height: 100vh;width: 300px;padding: 20px;box-sizing: border-box;width: 100%;">
    <header>
      <MBreadcrumb :item="breadcrumbItem" />
    </header>
    <main>
      <MTitle class="title">
        <template #left>
          包装信息
        </template>
      </MTitle>
      <table id="attributeTable" class="mtable">
        <tr class="mtr">
          <td class="field">包装型号</td>
          <td class="value">
            <MInput v-model="ProductInfo[0]" style="font-size: 12px;width: 100%" disabled></MInput>
          </td>
        </tr>
        <tr class="mtr">
          <td class="field">使用产品</td>
          <td class="value">
            <MInput v-model="ProductInfo[1]" style="font-size: 12px;width: 100%" disabled></MInput>
          </td>
        </tr>
        <tr class="mtr">
          <td class="field">包装名称</td>
          <td class="value">
            <MInput v-model="ProductInfo[2]" style="font-size: 12px;width: 100%" disabled></MInput>
          </td>
        </tr>
        <tr class="mtr">
          <td class="field">包装数量</td>
          <td class="value">
            <MInput v-model="ProductInfo[3]" style="font-size: 12px;width: 100%" disabled></MInput>
          </td>
        </tr>

      </table>
      <MTitle class="title">
        <template #left>
          标识信息
        </template>
      </MTitle>
      <MTag v-for="(obj, index) in tagItems" :key="index">{{ obj }}</MTag>
      <MTitle class="title">
        <template #left>
          入库信息
        </template>
      </MTitle>
      <table id="attributeTable" class="mtable">
        <tr class="mtr">
          <td class="field">编号</td>
          <td class="value">
            <MInput v-model="ProductInfo1[0]" style="font-size: 12px;width: 100%" disabled></MInput>
          </td>
        </tr>
        <tr class="mtr">
          <td class="field">供应商</td>
          <td class="value">
            <MInput v-model="ProductInfo1[1]" style="font-size: 12px;width: 100%" disabled></MInput>
          </td>
        </tr>
        <tr class="mtr">
          <td class="field">入库类型</td>
          <td class="value">
            <MInput v-model="ProductInfo1[2]" style="font-size: 12px;width: 100%"></MInput>
          </td>
        </tr>
        <tr class="mtr">
          <td class="field">制单人</td>
          <td class="value">
            <MInput v-model="ProductInfo1[3]" style="font-size: 12px;width: 100%" disabled></MInput>
          </td>
        </tr>
        <tr class="mtr">
          <td class="field">审核人</td>
          <td class="value">
            <MInput v-model="ProductInfo1[4]" style="font-size: 12px;width: 100%"></MInput>
          </td>
        </tr>
        <tr class="mtr">
          <td class="field">审核意见</td>
          <td class="value">
            <MInput v-model="ProductInfo1[5]" style="font-size: 12px;width: 100%"></MInput>
          </td>
        </tr>
      </table>
    </main>
    <footer v-if="!isDisable">
      <MButton @click="printOrder">确认入库</MButton>
    </footer>
    <MMessage v-if="toastVisible" :message="toastMessage" :state="toastState" />

  </div>
</template>

<script>
import { ref, onMounted } from 'vue';
import MBreadcrumb from "../../components/MBreadcrumb.vue"
import MTitle from "../../components/MTitle.vue"
//import MList from "../../components/MList.vue"
import MButton from "../../components/MButton.vue"
import MInput from "../../components/MInput.vue"
import MMessage from '../../components/MMessage.vue';
import MTag from '../../components/MTag.vue';
import axios from "../../axios/axios"
export default {
  name: "PackageInfo",
  components: {
    MBreadcrumb,
    MTitle,
    //MSelect,
    MButton,
    MInput,
    MMessage,
    MTag
    //MIcon
  },
  setup() {
    const toastVisible = ref(false)
    const toastMessage = ref("")
    const toastState = ref("success")
    const isPrint = ref(false)
    const breadcrumbItem = ref(
      {
        key: "0",
        title: '赋码管理',
        children: {
          key: "0-0",
          title: '配件入库',
        }
      })
    //const userId="12121"
    const ProductInfo = ref(["", "", "", ""])
    const ProductInfo1 = ref(["", "", "", "", "", ""])

    const identifys = ref([])
    const tagItems = ref([])
    const params = ref([])
    const userId = ref("")
    const orderInfo = ref({})
    const isDisable = ref(false)

    const printOrder = () => {

      if (checkValue()) {
        if (orderInfo.value.orderstate !== "5") {
          axios.post("/order/updatebyid", {
            id: orderInfo.value.id,
            orderstate: "5",
          }).then(res => {
            if (res.data.Code === "200") {
              orderInfo.value.orderstate = "5"
            }
          })

          axios.post("/productstore/store?userId=" + params.value.get('userId') + "&trainingId=" + params.value.get('trainingId'), {
            storenumber: ProductInfo1.value[0],
            supplier: ProductInfo1.value[1],
            storetype: ProductInfo1.value[2],
            creator: ProductInfo1.value[3],
            reviewer: ProductInfo1.value[4],
            opinion: ProductInfo1.value[5],
            ordernumber: orderInfo.value.ordernumber
          }).then(res => {
            if (res.data.Code === "200") {
              messageShow("入库成功", "success")
            } else {
              messageShow(res.data.Msg, "warning")

            }
          })
        } else {
          messageShow("已入库", "warning")
        }

      }



    }
    const checkValue = () => {
      if (ProductInfo1.value[2] === "") {
        messageShow("请输入入库类型", "warning")
        return false
      }
      if (ProductInfo1.value[4] === "") {
        messageShow("请输入审核人", "warning")
        return false
      }
      if (ProductInfo1.value[5] === "") {
        messageShow("请输入审核意见", "warning")
        return false
      }
      return true
    }
    const messageShow = (msg, state) => {
      toastMessage.value = msg;
      toastVisible.value = true;
      toastState.value = state
      // 使用 setTimeout 模拟 Toast 组件内部的定时器功能（仅用于演示）
      // 在实际使用中，你应该依赖 Toast 组件内部的定时器
      setTimeout(() => {
        toastVisible.value = false;
      }, 3000); // 与 Toast 组件中的 duration 属性保持一致
    }

    onMounted(() => {
      // 获取 URL 参数
      const param = new URLSearchParams(window.location.search);
      params.value = param
      if (param.has('userId')) {
        userId.value = param.get('userId');
      }
      if (param.has('isDisable')) {
        isDisable.value = param.get('isDisable') === "true"
      }
      axios.get('/order/select?userId=' + param.get('userId') + "&trainingId=" + param.get('trainingId') + "&isPart=1")
        .then(res3 => {
          orderInfo.value = res3.data.Data
          axios.get('/logistics/select?orderNumber=' + res3.data.Data.ordernumber)
            .then(res1 => {
              axios.get('/delivery/select?logisticsNumber=' + res1.data.Data.logisticsnumber)
                .then(res => {
                  if (res.data.Code === "200") {
                    var data = res.data.Data

                    var info = [...ProductInfo.value]
                    info[0] = data.packmodel
                    info[1] = data.productname
                    info[2] = data.packname
                    info[3] = data.packnumber
                    ProductInfo.value = info
                    if (param.get('code') !== null) {
                      // var code = param.get('code')
                      // var packIds = data.packidentifys.split(",")
                      //var index = packIds.indexOf(code);
                      var ids = data.identifys.split(",")
                      // var items = []
                      // for (var i = 0; i < 10; i++) {
                      //   items[i] = ids[10 * index + i]
                      // }
                      tagItems.value = ids
                    }
                    axios.get('/productstore/number').then(res2 => {

                      ProductInfo1.value = [res2.data.Data, res3.data.Data.suppliercompany, "", res3.data.Data.contactsname, "", ""]
                    })
                  }

                })
            })
        })

    });
    return {
      toastVisible,
      toastMessage,
      toastState,
      breadcrumbItem,
      tagItems,
      ProductInfo,
      identifys,
      printOrder,
      isPrint,
      ProductInfo1,
      isDisable
    };
  },
};
</script>

<style scoped>
.title {
  margin-top: 30px;
}

.title1 {
  margin-top: 20px;
}

.mtr {
  display: flex;
  flex-wrap: wrap;
  /* 允许子元素换行 */
  align-items: flex-start;
}

.container {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}

footer {
  text-align: center;
  height: 10%;
}

main {
  flex: 1;
}

.mtable {
  width: 100%;
  font-size: 13px;

}

.field {
  text-align: left;
  padding: 4px 0;
  flex: 1 1 60px;
  word-break: break-word;
  /* 允许长单词换行 */
  overflow-wrap: break-word;
  min-width: 0;
  /* 确保内容可以缩小 */
  height: 26px;
  line-height: 26px;
}

.value {
  text-align: right;
  padding: 4px 0;
  flex: 1 1 170px;
  word-break: break-word;
  /* 允许长单词换行 */
  overflow-wrap: break-word;
  min-width: 0;
  height: 26px;
  line-height: 26px;
  /* 确保内容可以缩小 */
}
</style>
